/* Modal container styling */
#bookDemoModal .modal-content {
  border-radius: 10px; /* Rounded corners */
  border: 1px solid transparent; /* Border */
  opacity: 1; /* Fully opaque */
  background-color: white; /* Background color for visibility */
  z-index: 999; /* Ensure it is above other elements */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Different sizes for each step */
.modal-step1 {
  /* width: 536px; 
  height: 587px;  */
  /* align-items: center; */
}

.modal-step2, .modal-step3 {
  /* width: 536px; 
  height: 649px;  */
}

/* Blurred background styling */
.blur-background {
  position: fixed; /* Ensure it's positioned relative to the viewport */
  top: 0;
  left: 0;
  /* width: 100%;
  height: 100%; */
  filter: blur(8px) brightness(0.5);
  pointer-events: none; /* Prevent interactions */
  cursor: not-allowed; /* Block cursor */
  z-index: 9998; /* Make sure it's below the popup */
}


.step-content h2 {
  font-size: 24px;
  font-weight: 600;
}

.step-content p {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.5px;
  text-align: left;
  color: #00000099;


}

#bold {
  font-weight: 600;
  color: #000000;
}

/* Input group styling */
.input-group {
  display: flex;
  align-items: center; /* Center items vertically */
  margin-bottom: 15px;
  border: 1px solid #ddd; /* Border around input group */
  border-radius: 5px;
  height: 50px;
  padding: 8px, 16px, 8px, 16px;
  box-sizing: border-box;
  background-color: #FAFBFE;
  color: #808080;

}

.input-group img {
  margin-right: 10px; /* Space between image and input */
  width: 24px; /* Adjust width as needed */
  height: 24px; /* Adjust height as needed */
  /* margin-left: 8px; */
}

.input-group input {
  flex: 1; /* Make input field take up remaining space */
  border: none;
  outline: none;
  margin: 0; /* Remove margin if not needed */
  border-radius: 5px;
  font-size: 16px;
  background-color: #f9f9f9; /* White background for input fields */
  width: 100%;
}
/* Prevent background change on input focus */
.input-group input[type="text"]:focus,
.input-group input[type="email"]:focus {
    background-color: #FAFBFE; /* Keep background transparent */
    border-color: #0056b3; /* Optional: Change border color on focus */
    outline: none; /* Remove default outline */
}




.stpe2-btns {
  display: flex;
  justify-content: space-between;
}

.stp3-btns{
  display: flex;
  justify-content: space-between;
}

/* Button styling */
.white-btn {
  width: 200px;
  height: 45px;
  color: #065ad8;
  border: 1px solid #065ad8;
  border-radius: 8px;
  margin-right: 1rem;
  margin-top: 30px;
  background-color: #fff;
}
.cloud-provider-checkbox img {
	width: 27.562px;
}


.blue-btn {
  width: 200px;
  height: 45px;
  color: #ffffff;
  border: 1px solid #065ad8;
  border-radius: 8px;
  background-color: #065ad8;
  margin-top: 30px;
}


#bookDemoModal button#backToStep1,
#bookDemoModal  button#backToStep2 {
  background-color: transparent;
  color: #007bff;
  border: 1px solid #007bff;
}

/* Cloud provider checkbox styling */
.cloud-provider-checkbox {
  display: flex;
  align-items: center; /* Center items vertically */
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #0000001a;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.cloud-provider-checkbox input {
  display: none;
}

.cloud-provider-checkbox.highlighted {
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.cloud-provider-checkbox img {
  margin-right: 1rem;
} 

.label-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: background-color 0.3s ease;
}

/* .label-content:hover {
  background-color: #ffffff;
} */

.inside-lable-content {
  display: flex;
}

.checkbox-text {
  font-size: 16px;
  font-weight: 400;
  margin-left: 10px;
  color: #808080;
  line-height: 20px;
}

/* Custom checkbox styling */
.custom-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.60);; /* Blue border */
  position: relative;
  margin-right: 10px;
  border-radius: 50%; /* Makes the checkbox circular */
  background-color: transparent; /* Transparent when not checked */
  display: inline-block;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Empty checkbox (before checked) */
.custom-checkbox {
  width: 20px;
  height: 20px;
 /* Blue border */
  position: relative;
  margin-right: 10px;
  border-radius: 3px; /* Slight rounding for a box, adjust if needed */
  background-color: transparent; /* Transparent when not checked */
  display: inline-block;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.certify-mobile {
  display: none;
}

/* Empty checkbox (before checked) */
.custom-checkbox::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 3px; /* Keep it square, not rounded */
  transition: background-color 0.3s ease;
}

/* Checked state: fully blue background and large white tick */
input:checked + .label-content .custom-checkbox {
  background-color: #1890ff; /* Blue background */
  border-color: #1890ff; /* Full blue border */
}

input:checked + .label-content .custom-checkbox::after {
  content: '\2713'; /* Unicode for checkmark */
  font-size: 16px;  /* Large tick mark */
  color: white;     /* White color for the tick */
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the tick */
}

/* Optional: hide the default checkbox */
.custom-checkbox-input {
  display: none;
}
/* Radio button styling */
.radio-group {
  margin-bottom: 12px;
}

.radio-group label {
  display: flex;
  align-items: center;
  border: 1px solid #0000001A;
  border-radius: 6px;
  padding: 8px 16px 8px 16px;
  margin-bottom: 10px;
  height: 50px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.radio-group input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-group input:checked + label {
  border-color: #1890ff;
  background-color: #e6f7ff;
}

.custom-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d9d9d9;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  transition: border-color 0.3s ease;
}

.radio-group input:checked + label .custom-radio {
  border-color: #1890ff;
}

.custom-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #1890ff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.radio-group input:checked + label .custom-radio::after {
  opacity: 1;
}

.radio-text {
  font-size: 16px;
  font-weight: 400;
  margin-left: 30px;
  color: #808080;

}
/* Custom CSS for Close Button */
.custom-close-button {
  position: absolute;
  top: 10px; /* Adjust this value to position it further down */
  right: 15px; /* Adjust this value to bring it closer to the right edge */
  z-index: 1051; /* Ensure the button is above all other content */
  background: none; /* Removes default button styling */
  border: none; /* Removes default button border */
  font-size: 31px; /* Makes the 'X' icon larger */
  cursor: pointer;
  color: #000000;
}
@media (max-width:768px){
  #bookDemoModal .modal{
    width: 90vw;
  }
  #bookDemoModal .modal-body {
    width: 100%;
  }
 /* .modal-content{
  width: 95%;
  padding: 15px;
 } */


 .modal-step2, .modal-step3 {
  /* width: 80%; 
  height: 90%;  */
  padding: 15px;
  
}

.input-group{
  display: flex;
  flex-direction: row;
}

.cloud-provider-checkbox {
  width: 100%;
}

.cloud-provider-checkbox .label-content{
  width: 100%;
}
.radio-group{
  width: 100%;
}
.radio-group label{
  width: 100%;
}
.custom-close-button{
  top: 0;
  right: 5px;
}
}